import React, { Component } from 'react'
import {Card,Table,Select,Input,Button, message} from 'antd'
import LinkButton from '../../components/link-button';
import  {PAGE_SIZE} from '../../utils/constant.js'
import {reqProductList,reqUpdateBtnStatus,reqSearchProducts} from '../../api'

const { Option } = Select;
  
 class Product extends Component {

  state={
    dataList:[],
    total: 0, // 商品的总数量
    searchName: '', // 搜索的关键字
    searchType: 'productName', // 根据哪个字段搜索
  }

   initCloumns=()=>{

      return this.columns =  [{
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '商品描述',
        dataIndex: 'desc',
        key: 'age',
      },
      {
        title: '价格',
        dataIndex:'price',
        render:(price)=> '￥' + price
      },
      {
        title: '状态',
        width:100,
    render:(product)=>{
      const{status,_id}=product
      const newStatus = status===1 ? 2 : 1
      return(
        <span>
          <Button type="primary" onClick={()=>this.updateBtnStatus(product._id, newStatus)}>
          {status===1 ? '下架' : '上架'}
          </Button>
          <br />
         <span> {status===1 ? '在售' : '已下架'}</span>
        </span>
      )
    }
 
      },
      {
        title: '操作',
        width:100,
        render:(product)=>{
         return(
          <span>
            <LinkButton onClick={()=>this.props.history.push('/goods/detail',{product})}>详情</LinkButton>
            <br />
            <LinkButton onClick={()=>this.props.history.push('/goods/addupdate',product)}>修改</LinkButton>
          </span>
         ) 
        }
    
      },
    ]

   }

   updateBtnStatus= async (productId,status)=>{

       const result = await reqUpdateBtnStatus(productId,status)
       if(result.status === 0){
         message.success('更新状态成功')
       }
   }
 
  
  JumpToaddUpdate=()=>{
    this.props.history.push('/goods/addupdate')
   }

  //  获取分页列表

  getProductList= async (pageNum)=>{
    this.pageNum = pageNum 
    const {searchName, searchType} = this.state

     let result
     if (searchName) {
       result = await reqSearchProducts({pageNum, pageSize: PAGE_SIZE, searchName, searchType})
     } else { 
       result = await reqProductList(pageNum, PAGE_SIZE)
     }
    console.log('weVBwcbui==>',result)
     if (result.status === 0) {
      // 取出分页数据, 更新状态, 显示分页列表
      const {total, list} = result.data
      this.setState({
        total,
        dataList: list
      })
    }
     
  }

  componentDidMount(){
    this.getProductList(1)
  }

  UNSAFE_componentWillMount(){
     this.initCloumns()
   }



  render() {

const {total, searchType, searchName,dataList} = this.state
    const title = (
     <span>
       <Select style={{width:150}}
       value={searchType}
       onChange={value=>this.setState({searchType:value})}
       
       >
          <Option key='productName' value='productName'>按名称搜索</Option> 
          <Option key='productDesc' value='productDesc'>按描述搜索</Option> 
         
        </Select> 
          <Input style={{width: 150, marginLeft: 10, marginRight: 10}} 
          placeholder='关键字'
          value={searchName}
          onChange={event => this.setState({searchName:event.target.value})}        
           /> 
          <Button type='primary'  onClick={() => this.getProductList(1)}>
            搜索
          </Button>
      </span>
    )
    
    const addProducts =(
      <span>
       <Button type="primary" icon="plus"  onClick={this.JumpToaddUpdate}>
       添加
       </Button>
       </span>
    )

    return (
      <div style={{ background: '#ECECEC', padding: '30px' }}>
      <Card title={title} bordered extra={addProducts}>
      <Table 
      rowKey="_id"
      columns={this.columns}
       dataSource={dataList} 
       pagination={{
        current: this.pageNum,
        total,
        defaultPageSize: PAGE_SIZE,
        showQuickJumper: true,
        onChange: this.getProductList
      }}
       
       />
      
      </Card>
    </div>
    )
  }
}

export default Product
